<html>
<head>
<style>
	body{background-color:#e8e8e8;color:#111;margin:0;padding:0;font-family:sans-serif;}
	#divider{position:absolute;top:0;left:0;right:0;height:1px;border-top:1px solid #b0b0b0;visiblity:visible;}
	#body{position:relative;top:1px;border-top:1px solid #404040;}
	body.unfocused.osx #body {border-top:1px solid #878787;}
	body.unfocused.osx #divider {position:absolute;top:0;left:0;right:0;height:1px;visibility:hidden;}
	#logo{position:absolute;top:10px;left:10px;width:78px;height:78px;background:transparent;}
	#logo img {visibility:hidden;}
	#explain{position:absolute;top:60px;left:110px;right:10px;font-size:12px;font-weight:normal;}
	#title{position:absolute;top:10px;left:110px;font-weight:bold;font-size:15px;}
	#notes_header{position:absolute;top:80px;left:110px;overflow:auto;right:10px;font-size:12px;font-weight:bold;}
	#notes{position:absolute;top:100px;left:110px;overflow:auto;right:20px;height:174px;border:1px solid #888;background-color:#fff;color:#111;padding:0;margin:0;font-size:12px;}
	#buttons{position:absolute;bottom:30px;right:10px;}
	#buttons button {margin-right:10px;-webkit-appearance:push-button;}
	iframe {padding:0;margin:0;height:171px;}
</style>
<script type="text/javascript" src="ti://tiui/jquery-1.3.2.js"></script>
<script>
   Titanium.UI.currentWindow.addEventListener(function(name)
   {
		switch(name)
		{
			case 'unfocused':
			{
				$(document.body).addClass('unfocused');
				break;
			}
			case 'focused':
			{
				$(document.body).removeClass('unfocused');
				$('#btn_install').focus();
				break;
			}
		}
   });
   function frameLoaded()
   {
	  // re-write links to open in external system browser
      var nodes = window.frames['notes_html'].document.getElementsByTagName("A");
	  for (var c=0;c<nodes.length;c++)
	  {
		var node = nodes[c];
		node.setAttribute('target','ti:systembrowser');
	  }
   }
	$(function()
	{
		var currentWindow = Titanium.UI.getCurrentWindow();
		var name = currentWindow.getDialogParameter('name');
		var icon = currentWindow.getDialogParameter('icon');
		var ver_from = currentWindow.getDialogParameter('ver_from');
		var ver_to = currentWindow.getDialogParameter('ver_to');
		var notes_url = currentWindow.getDialogParameter('notes_url');
		var parent = currentWindow.getParent();
		
		Titanium.UI.currentWindow.setTitle(name+' Update Available');
		
		if (notes_url)
		{
			$('#notes_html').attr('src',notes_url);
		}
		else
		{
			$('#notes_body').css('display','none');
			currentWindow.setHeight(170);
			currentWindow.setWidth(450);
		}
		$('.name').html(name);
		$('.tover').html(ver_to);
		$('.fromver').html(ver_from);
		
		$('#btn_later').click(function()
		{
			currentWindow.close('later');
		});
		
		$('#btn_install').click(function()
		{
			currentWindow.close('install');
		});
		
		if (icon)
		{
			$('#icon').get(0).onerror = function()
			{
				// hide if we can't find it
				$('#icon').css('visibility','hidden');
			};
			$('#icon').attr('src',icon).css('visibility','visible');
		}
		
	});
</script>
</head>
<body>
	<div id="divider"></div>
	<div id="body">
		<div id="logo"><img id="icon" width="78" height="78"/></div>
		<div id="title">A new version of <span class="name"></span> is available!</div>
		<div id="explain">
			<span class="name"></span> <span class="tover"></span> is now available - you have <span class="fromver"></span>. Would you like to
			download and install it now?
		</div>
		<div id="notes_body">
			<div id="notes_header">Release Notes:</div>
			<div id="notes">
				<iframe onload="frameLoaded()" id="notes_html" name="notes_html" width="100%" frameborder="0" framespacing="0"></iframe>
			</div>
		</div>
	</div>
	<div id="buttons">
		<button id="btn_later">Remind Me Later</button>
		<button id="btn_install">Install Update</button>
	</div>
</body>
</html>
